<template>
  <view class="menu-with-bg flex flex-wrap justify-between">
    <view
      :class="`menu-with-bg-item rounded-1 ${item.bgColor}-bg`"
      v-for="(item, index) in menuList"
      :key="index"
      @click="onMenuItem(item)"
    >
      <view class="menu-name relative px-6 box-border">
        <text class="text-[31rpx] color-black">{{ item.title }}</text>
        <up-badge
          max="99"
          :value="item.badge"
          color="#fff"
          bgColor="#F20000"
          :show="item.badge ? true : false"
          absolute
          :offset="item.title.length > 4 ? [5, 10] : [15, 10]"
        ></up-badge>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
const props = defineProps({
  menuList: {
    type: Array,
    default: 208,
  },
});
const emit = defineEmits(["onMenuItem"]);
const onMenuItem = (item: any) => {
  emit("onMenuItem", item);
};
</script>

<style scoped lang="scss">
// 自定义带图片背景的菜单
.menu-with-bg {
  width: 100%;
  &-item {
    width: 49%;
    height: 135rpx;
    text-align: center;
    position: relative;
    margin-bottom: 24rpx;
    // box-shadow: 0rpx 2rpx 4rpx 1rpx rgba(0, 0, 0, 0.16);
    .menu-name {
      width: calc(100% - 110rpx);
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  &-item:last-child {
    margin-bottom: 0;
  }

  .fwcl-bg {
    background: url("./fwcl.png") no-repeat;
    background-size: 100% 100%;
  }
  .jsc-bg {
    background: url("./jsc.png") no-repeat;
    background-size: 100% 100%;
  }
  .gzzz-bg {
    background: url("./gzzz.png") no-repeat;
    background-size: 100% 100%;
  }

  .yyfw-bg {
    /* background: url("@/static/icon/yyfw.png") no-repeat; */
    background: url("./yyfw.png") no-repeat;
    background-size: 100% 100%;
  }
  .xsql-bg {
    /* background: url("@/static/icon/yyfw.png") no-repeat; */
    background: url("./xsql.png") no-repeat;
    background-size: 100% 100%;
  }
  .yhsp-bg {
    background: url("./yhsp.png") no-repeat;
    background-size: 100% 100%;
  }
  .yellow-bg {
    background: url("@/static/icon/yellowBg.png") no-repeat;
    background-size: 100% 100%;
  }
  .tangerine-bg {
    background: url("@/static/icon/tangerineBg.png") no-repeat;
    background-size: 100% 100%;
  }
  .azure-bg {
    background: url("@/static/icon/azureBg.png") no-repeat;
    background-size: 100% 100%;
  }
  .purple-bg {
    background: url("@/static/icon/purpleBg.png") no-repeat;
    background-size: 100% 100%;
  }
  .darkGreen-bg {
    background: url("@/static/icon/darkGreenBg.png") no-repeat;
    background-size: 100% 100%;
  }
}
</style>
